<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发帖</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../assets/css/bootstrap-table.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery.filer.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.filer-dragdropbox-theme.css">
    <link rel="stylesheet" type="text/css" href="css/tomorrow.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <link rel="stylesheet" href="../assets/css/datepicker.css"/>
    <style>
        body{
            background: #084779;
        }
        .header{
            width: 100%;
            height: 80px;
            background: url('image/header.png') no-repeat;
        }
        .main{
            width: 1170px;
            margin: 0 auto;
            background: white;
            padding-bottom: 20px;
        }
        .main .headerUrl{
            width: 11%;
            float: left;
        }
        .main .selectContent{
            width: 88%;
            float: right;
            padding-top: 20px;
        }
        .main .select01{
            overflow: hidden;
        }
        .main .select01 p{
            float: left;
        }
        .main .select01 p span{
            display: inline-block;
            margin-right: 20px;
        }
        .main .select01 .type{
            float: right;
        }
        .main .select02{
            position: relative;
        }
        .main .select02 .form-control{
            width: auto;
            position: absolute;
            right: 0;
            top: 0;
        }
        .main .select02 button{
            margin-left: 10%;
        }
        .main .select02 #day, .main .select02 #time{
            display: inline-block;
            position: static;
            height: 30px;
            margin-right: 5px;
        }
        .main .select02 .address{
            display: inline-block;
            width: 270px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
        }
        .main .main-bottom{
            overflow: hidden;
            padding: 0 15px 10px;
        }
        .main .main-bottom .first{
            float: left;
        }
        .main .main-bottom .second{
            float: right;
        }
        .main .main-bottom .btn{
            width: 160px;
            border-radius: 15px;
            border: 1px solid;
            margin-right: 10px;
        }
        .share{
            display: none;
            overflow: auto;
            /*overflow-y: hidden;*/
            position: absolute;
            left:0;
            top:0;
            right: 0;
            bottom: 0;
            background: white;
        }
        .shareContent{
            width: 100%;
            height:auto;
            padding: 15px;
            overflow: hidden;
        }
        .shareContent .shareContentLeft{
            float: left;
            width: 10%;
            height: 100px;
            margin-right: 2%;
        }
        .shareContent .shareContentLeft img{
            width: 100%;
            height: 100%;
        }

        @media screen and (min-width: 768px) {
            .container {
                width: 100%;
            }
        }

        /*帖子预览*/
        #previewModal .previewHeader{
            height: 100px;
        }
        #previewModal .previewHeader .headerImg{
            width: 20%;
            height: 80%;
            float: left;
        }
        #previewModal .previewHeader .headerImg img{
            height:100%;
        }
        #previewModal .previewHeader .info{
            height:100%;
            width: 75%;
            float: right;
            padding-top: 25px;
        }
        #previewModal .previewHeader .info .name{
            font-weight: bold;
            font-size: 20px;
        }
        #previewModal .txtContent p{
            line-height: 30px;
            text-indent: 2em;
        }
        /*分享预览*/
        #previewModal .shareContent{
            border: 1px solid #ccc;
        }
        #previewModal .shareContent .shareInfo{
            overflow: hidden;
            margin-bottom: 10px;
        }
        #previewModal .shareContent .shareInfo .img{
            float: left;
            height: 60px;
            width: 60px;
            margin-right: 10px;
        }
        #previewModal .shareContent .shareInfo .shareUser{
            float: left;
        }
        #previewModal .shareContent .shareInfo .shareUser{
            float: left;
        }
        #previewModal .shareContent .shareInfo .shareUser .shareUserName{
            font-weight: bold;
            font-size: 20px;
        }
        #previewModal .resourceContent ul{
            overflow: hidden;
        }

        /*修改文件显示原样式*/
        #previewModal .jFiler-item-thumb-image{
            height: 200px;
            width: 200px;
            text-align: center;
            /*line-height: 250px;*/
            /*border: 1px solid;*/
            padding: 10px;
            margin: 0 auto;
        }
        #previewModal .jFiler-items-grid .jFiler-item{
            width: 50%;
        }
        #previewModal .jFiler-item jFiler-no-thumbnail{
            width: 100%;
        }
        #previewModal .jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb{
            width: 100%;
            height:212px;
        }
        #previewModal .jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb span.jFiler-icon-file{
            margin-top: 65px;
        }
        /*评论部分*/
        /*#previewModal .comment .NoComment{*/
            /*width: 50%;*/
            /*margin: 0 auto;*/
        /*}*/
        /*#previewModal .comment .NoCommetText{*/
            /*text-align: center;*/
        /*}*/

    </style>
</head>
<body>
    <div class="header">

    </div>
    <div class="main">
        <div class="content" style="height:150px;padding: 15px;margin-right: auto;margin-left: auto;">
            <div class="headerUrl" style="height: 100%;">
                <img src="image/control.png" alt="" style="height: 100%;">
            </div>
            <div class="selectContent">
                <div class="select01">
                    <p>
                        <span>请选择用户</span><button class="selectUser btn btn-default" data-toggle="modal" data-target="#userModal">选择用户</button>
                    </p>
                    <div class="type">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>普通帖
                        </label>
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option1">分享帖
                        </label>
                    </div>
                </div>
                <div class="select02">
                    <div class="time" style="display: inline-block;">
                        <input class="Wdate form-control" type="text" id="day" style="display: inline-block;position: static;height: 30px;"/>
                        <input class="Wdate form-control" type="text" id="time"  style="display: inline-block;position: static;height: 30px;"/>
                    </div>
                    <button class="btn btn-default" type="button" data-toggle="modal" data-target="#mapModal" style="padding: 3px 12px 2px;">定位</button>
                    <span class="address">中国 湖南省 长沙市</span>
                    <span class="address01" style="display: none;">中国 湖南省 长沙市</span>
                    <span class="Lat" style="display: none;"></span>
                    <span class="Lng" style="display: none;"></span>
                    <div class="label" style="float: right;">
                        <select class="form-control Label" name="type" id="addLabel">
                        </select>
                        <!--<input type="text" class="customTag form-control" placeholder="输入自定义标签" style="display: none;margin-top: 36px;margin-right: -7px;line-height: 22px;color: black;font-size: 14px;">-->
                    </div>
                    <!--<div class="dropdown">-->
                        <!--<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">-->
                            <!--无标签-->
                            <!--<span class="caret"></span>-->
                        <!--</button>-->
                        <!--<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">-->
                            <!--<li><a href="#">Action</a></li>-->
                            <!--<li><a href="#">Another action</a></li>-->
                            <!--<li><a href="#">Something else here</a></li>-->
                        <!--</ul>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
        <div class="text" style="padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;">
            <textarea rows="3" cols="20" style="width: 100%;height: 100px;">我的人生目标是三十岁时，在北京拥有一套自己的房子，现在我的目标实现了一半：我已经30岁了。</textarea>
        </div>
        <section id="section4" class="section-white">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane pt20 pb20 active in" id="demo-dragdrop">
                                    <div class="row">
                                        <div class="col-md-12" style="width: 100%;">
                                        <div class="col-md-12" style="width: 100%;">
                                            <input type="file" name="files" id="demo-fileInput-6" multiple>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="shareContent" style="display: none;">
            <div class="shareContentLeft">
                <img src="" alt="">
                <div class="shareInfo"><p class="name"></p><p class="createTime"></p></div>
            </div>
            <div class="shareContentRight">
                <p class="text"></p>
                <ul class="mediaList jFiler-items-list jFiler-items-grid"  style="overflow: hidden;">

                </ul>
            </div>
        </div>

        <div class="main-bottom">
            <div class="first">
                <button class="btn btn-primary" data-toggle="modal" data-target="#previewModal">预览效果</button>
            </div>
            <div class="second">
                <button class="btn btn-success release">马上发布</button>
                <select id="select" class="form-control" style="display: inline-block;width: 55%;">
                    <option value="0">发布后，关闭此页面</option>
                    <option value="1">发布后留在此页，保留内容</option>
                    <option value="2">发布后留在此页，内容清空</option>
                </select>
            </div>
        </div>
        <div>
            <video id="video" controls="controls">
                <source src=".mp4" />
            </video>
            <button id="capture">Capture</button>
        </div>

        <!-- 选择用户的modal start-->
        <div class="modal fade" id="userModal" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalLabel">
            <div  class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="exampleModalLabel">用户选择</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row" style="padding: 0 15px;">
                            <div style="width: 30%;float: left;margin-right: 10px;">
                                <span>昵称:</span><input class="nickName form-control" type="text" placeholder="请输入昵称" style="display: inline-block;width: 75%;">
                            </div>
                            <div style="width: 25%;float: left;margin-right: 10px;">
                                <span>性别:</span>
                                <select name="search-gender" id="search-gender" class="form-control" style="display: inline-block;width: 70%;">
                                    <option value="">不限</option>
                                    <option value="1">男</option>
                                    <option value="0">女</option>
                                </select>
                            </div>
                            <!--<div style="width: 30%;float: left;">-->
                                <!--<span>年龄:</span>-->
                                <!--<input id="search-maxCommentCount" type="text" class="form-control" style="display: inline-block;width: 30%;" />-->
                                <!--<span class="positi"> 至 </span>-->
                                <!--<input  id="search-minCommentCount" type="text"  class="form-control" style="display: inline-block;width: 30%;"/>-->
                            <!--</div>-->
                            <button type="button" id="userSearch" class="btn btn-primary btn-sm" title="查询">
                                搜索
                            </button>
                            <!--<span>昵称</span><input type="text" placeholder="请输入昵称">-->
                            <!--<span>性别</span>-->
                            <!--<select name="search-gender" id="search-gender">-->
                                <!--<option value="">不限</option>-->
                                <!--<option value="1">男</option>-->
                                <!--<option value="0">女</option>-->
                            <!--</select>-->
                            <!--<span>年龄</span>-->
                            <!--<input id="search-maxCommentCount"-->
                                   <!--type="text" />-->
                            <!--<span class="positi"> 至 </span>-->
                            <!--<input  id="search-minCommentCount"-->
                                   <!--type="text" />-->
                            <!--<button type="submit" id="dataSearch" class="btn btn-primary btn-sm" title="查询">-->
                                <!--搜索-->
                            <!--</button>-->
                        </div>

                        <table id="user_table" class="table"></table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="addUserConfirm" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 选择用户的modal end-->
    </div>

    <!--显示帖子列表-->
    <div class="share" style="padding: 15px;">
        <div class="search">
            <div style="width: 30%;float: left;margin-right: 10px;">
                <span>昵称:</span><input class="form-control" id="search-nickname" type="text" placeholder="请输入昵称" style="display: inline-block;width: 75%;">
            </div>
            <div style="width: 30%;float: left;">
                <span>创建时间:</span>
                <input id="startDate" class="Wdate form-control" type="text" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'endDate\')||\'2020-10-01\'}'})" style="display: inline-block;width: 30%;height: 34px;border: 1px solid #ccc;"/>
                <input id="endDate" class="Wdate form-control" type="text" onclick="WdatePicker({minDate:'#F{$dp.$D(\'startDate\')}',maxDate:'2020-10-01'})" style="display: inline-block;width: 30%;height: 34px;border: 1px solid #ccc;"/>
                <!--<input id="startDate" type="text" class="form-control date-picker form-control-three" style="display: inline-block;width: 30%;" data-date-format="yyyy-mm-dd" />-->
                <!--<span class="positi"> 至 </span>-->
                <!--<input  id="endDate" type="text"  class="form-control date-picker form-control-three" style="display: inline-block;width: 30%;" data-date-format="yyyy-mm-dd"/>-->
            </div>
            <button type="submit" id="tieZiSearch" class="btn btn-primary btn-sm" title="查询">
                搜索
            </button>
        </div>
        <div class="row" style="margin-top: 0px;">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <table id="yuanfen_table" class="table"></table>
                <!-- PAGE CONTENT ENDS -->
            </div>
            <!-- /.col -->
        </div>
        <div class="bottom">
            <button class="confirmNode btn btn-primary">确定</button>
            <button class="cancel btn btn-primary">取消</button>
        </div>
    </div>

    <!--地图的modal start-->
    <div class="modal fade bs-example-modal-lg" id="mapModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="height: 100%;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="exampleModalLabel">地图显示</h4>
                </div>
                <!--<div id="allmap"></div>-->
                <div class="modal-body" style="height: 450px;">
                    <iframe src="../TencentMap.html" style="height: 100%;width: 100%;"></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary confirmAddress"  data-dismiss="modal">保存</button>
                    <!--  <button type="reset" class="btn btn-warnning">重置</button> -->
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
                </div>
            </div>
        </div>
    </div>
    <!--地图的modal end-->

    <!-- 预览的modal start-->
    <div class="modal fade bs-example-modal-lg" id="previewModal" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="previewModalLabel">帖子预览</h4>
                </div>
                <div class="modal-body">
                    <div class="previewHeader">
                        <div class="headerImg">
                            <img src="" alt="">
                        </div>
                        <div class="info">
                            <p class="name"></p>
                            <p>
                                <span class="postTime"></span>
                                <span class="address"></span>
                                <span class="type"></span>
                            </p>
                        </div>
                    </div>
                    <div class="txtContent">
                        <h4>内容</h4>
                        <p></p>
                    </div>
                    <div class="shareContent" style="display: none;">
                        <h4>分享内容</h4>
                        <div class="shareInfo" style="overflow: hidden;">
                            <div class="img">
                                <img src="" alt="">
                            </div>
                            <div class="shareUser">
                                <p class="shareUserName"></p>
                                <p><span class="shareTime"></span>&nbsp;&nbsp;<span class="shareAddress"></span></p>
                            </div>
                        </div>
                        <p class="shareText"></p>
                        <ul class="jFiler-items-list jFiler-items-grid">

                        </ul>
                    </div>
                    <div class="resourceContent" style="display: none;">
                        <h4>媒体资源</h4>
                        <ul class="jFiler-items-list jFiler-items-grid">

                        </ul>
                    </div>
                    <!--<div class="comment">-->
                        <!--<div class="commentHeader">-->
                            <!--<i class="icon iconfont1 icon-tubiao15"></i>&nbsp;&nbsp;<span class="commentNum">当前3条评论</span>-->
                        <!--</div>-->
                        <!--<div class="empty"></div>-->
                    <!--</div>-->
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-primary" name="submit" data-type="add">保存</button>-->
                    <!--  <button type="reset" class="btn btn-warnning">重置</button> -->
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 预览的modal end-->
    <!--<script type="text/html" id="section">-->
            <!--<div class="container">-->
                <!--<div class="row">-->
                    <!--<div class="col-md-12">-->
                        <!--<div class="tab-content">-->
                            <!--<div role="tabpanel" class="tab-pane pt20 pb20 active in" id="demo-dragdrop">-->
                                <!--<div class="row">-->
                                    <!--<div class="col-md-12" style="width: 100%;">-->
                                        <!--<div class="col-md-12" style="width: 100%;">-->
                                            <!--<div class="jFiler jFiler-theme-dragdropbox"><input type="file" name="files" id="demo-fileInput-6" multiple="multiple" style="position: absolute; left: -9999px; top: -9999px; z-index: -9999;"><a class="jFiler-input-choose-btn blue-light" style="margin-bottom: 10px;">上传文件</a></div>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
    <!--</script>-->

    <script type="text/html" id="reasource">
        <li class="jFiler-item jFiler-no-thumbnail">
            <div class="jFiler-item-container">
                <div class="jFiler-item-inner">
                    <div class="jFiler-item-thumb">
                        <div class="jFiler-item-status">

                        </div>
                        <div class="jFiler-item-info">
                            <span class="jFiler-item-title"><b>reasourceName</b></span>
                        </div>
                        <div class="jFiler-item-thumb-image">
                            reasourceImg
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </script>
    <!--<script id="commentTemp" type="text/html">-->
        <!--<div class="commentBody">-->
            <!--<div class="weui-flex commentEditor">-->
                <!--<div class="headerImg"><img src="image/headerImg03.png" alt=""></div>-->
                <!--<div class="weui-flex__item">-->
                    <!--<p><span>用户昵称01</span></p>-->
                    <!--<p class="time">10分钟前</p>-->
                <!--</div>-->
                <!--<div class="likeInfo">-->
                    <!--<span><i class="icon iconfont1 icon-zan"></i></span><span>likeNum</span><span><i class="icon iconfont1 icon-tubiao15"></i></span>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="commentContent">-->
                <!--<p>content1</p>-->
                <!--<div class="commentImg">-->
                    <!--<img src="defaultImg" alt="">-->
                <!--</div>-->
                <!--<div class="reply" style="height: 115px;">回复</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</script>-->

    <script src="../assets/js/jquery-1.10.2.min.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../assets/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    <script src="../assets/js/date-time/bootstrap-datepicker.min.js"></script>
    <script src="js/My97DatePicker/WdatePicker.js"></script>
    <script src="js/jquery.filer.js" type="text/javascript"></script>
    <script src="js/prettify.js" type="text/javascript"></script>
    <script src="js/scripts.js" type="text/javascript"></script>
    <script src="js/custom.js" type="text/javascript"></script>
    <script type="text/javascript">
        $('.confirmAddress').click(function () {
            $(".address").html( $(".address01").html());
        });
//        ifream 调用方法
        function address(data){
            var obj = data.detail.addressComponents;
//            $(".address01").html(data.detail.address);
            $(".address01").html((data.detail.nearPois && data.detail.nearPois.length>0) ? data.detail.nearPois[0].address : obj.country+obj.province+obj.city+obj.district+obj.street);
            $(".Lat").html(data.detail.location.lat);
            $(".Lng").html(data.detail.location.lng);
        };
    </script>
</body>
</html>